<template>
  <div>
    <el-dialog
      title="车辆配置"
      :visible="driver"
      width="30%"
      @close="close"
    >
      <div>
        <span>配置司机需满足以下条件：</span>
        <div style="margin-top: 20px;">1.车辆信息已完善 </div>
        <div style="margin-top: 20px;">2.车辆无未完成运输任务</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="配置司机"
      :visible.sync="allocation"
      width="30%"
      @close="close"
    >
      <div>
        <div>
          <div style="margin-top: 20px;">车牌号：{{ driverData.licensePlate }}</div>
          <div style="margin-top: 20px;">车型：{{ driverData.truckTypeName }}</div>
          <div style="margin-top: 20px;">车辆状态：{{ driverData.workStatus===0?'停用':'可用' }}</div>
          <div style="margin-top: 20px;">实载重量：{{ driverData.allowableLoad }}</div>
          <div style="margin-top: 20px;">实载体积：{{ driverData.allowableVolume }}</div>
        </div>
        <div style="margin-top: 20px;">
          <span>配置司机：</span>
          <el-select v-model="driverIds" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div>
          <el-table
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="180"
              type="index"
            />
            <el-table-column
              prop="name"
              label="司机名称"
              width="180"
            />
            <el-table-column
              label="操作"
            >
              <template>
                <el-button style="color:#80beff">查看</el-button>
                <el-button type="primary">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="cancel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCarParticulars } from '@/api/truck'
export default {
  props: {
    driver: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      allocation: false, // 对话框显示隐藏
      driverData: {},
      options: [],
      driverIds: ''// 司机id列表
    }
  },
  methods: {
    // 第一层对话框隐藏
    close() {
      this.$emit('update:driver', false)
      this.allocation = false
    },
    // 点击确定跳司机详情
    async confirm() {
    // 获取车辆详情
      const res = await getCarParticulars(this.id)
      this.driverData = res.data
      this.allocation = true
    },
    // 确定配置
    async cancel() {
      // 获取绑定的司机
      // const result = await getBindingDrivers(this.id)
      // this.options = result.data
      this.$message.error('初始化数据不能修改')
    }
  }
}
</script>

<style>

</style>
